<html>
<head>
<link href="assets/upload.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/json2.js"></script>
<script type="text/javascript" src="assets/swfupload.js"></script>
<script type="text/javascript" src="assets/swfupload.queue.js"></script>
<script type="text/javascript" src="assets/fileprogress.js"></script>
<script type="text/javascript" src="assets/handlers.js"></script>
<script type="text/javascript">
  var swfu;

  window.onload = function() {
    var settings = {
      flash_url : "assets/swfupload.swf",
      flash9_url : "assets/swfupload_fp9.swf",
      upload_url: "upload.php",
      post_params: {
        query: JSON.stringify({ t: false })
      },
      file_size_limit : "300 MB",
      file_types : "*.jpg;*.png;*.jpeg;*.gif;",
      file_types_description : "All Image Files",
      file_upload_limit : 0,
      file_queue_limit : 0,
      custom_settings : {
        progressTarget : 'fsUploadProgress',
        statusTarget: 'divStatus',
        cancelButtonId : 'btnCancel',
        done : [],
        total : [],
        is_file_uploading : 0
      },
      debug: true,

      // Button settings
      button_image_url: "assets/swf_button.png",
      button_width: 170,
      button_height: 30,
      button_placeholder_id: "spanButtonPlaceHolder",
//      button_text: '<span class="theFont">Hello</span>',
//      button_text_style: ".theFont { font-size: 16; }",
      button_text_left_padding: 0,
      button_text_top_padding: 0,
      
      // The event handler functions are defined in handlers.js
      swfupload_preload_handler : preLoad,
      swfupload_load_failed_handler : loadFailed,
      file_queued_handler : myFileQueued,
      file_queue_error_handler : fileQueueError,
      file_dialog_complete_handler : fileDialogComplete,
      upload_start_handler : myUploadStart,
      upload_progress_handler : myuploadProgress,
      upload_error_handler : uploadError,
      upload_success_handler : myUploadSuccess,
      upload_complete_handler : uploadComplete,
      queue_complete_handler : myQueueComplete  // Queue plugin event
    };

    swfu = new SWFUpload(settings);
  };
  
  function myFileQueued(file) {
    try {
      this.customSettings.total[this.customSettings.total.length] = file;
    } catch (ex) {
      this.debug(ex);
    }
  }
  
  function myUploadStart(file) {
    try {
      var progress = new FileProgress(file, this.customSettings.progressTarget, this.customSettings.statusTarget);
//      progress.setStatus("Uploading...");
      progress.toggleCancel(true, this);

      var total = 0;
      for (var idx in this.customSettings.total) {
        var obj = this.customSettings.total[idx];
        total += parseFloat(obj.size, 10);
      }
      
      var done = 0;
      for (var idx in this.customSettings.done) {
        var obj = this.customSettings.done[idx];
        done += parseFloat(obj.size, 10);
      }
      
      if (this.customSettings.is_file_uploading) {
        var p_uploaded = roundNumber(done / 1024 / 1024, 1) + 'Mb';
        var t_uploaded = roundNumber(total / 1024 / 1024, 1) + 'Mb';
        progress.setStatus('<span style=\'color: #fff\'>0%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + p_uploaded + ' / ' + t_uploaded + '<span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )' + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
      }  else {
        progress.setStatus('<span style=\'color: #fff\'>0%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + (this.customSettings.done.length) + ' / ' + (this.customSettings.total.length) + '&nbsp;Photos  <span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )'  + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
      }
//      progress.setStatus('<span style=\'color: #fff\'>' + percent + '%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + uploaded + 'Mb / ' + total + 'Mb<span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )'  + '</span></span>');
      
    }
    catch (ex) {}
    return true;
  }
  
  function myuploadProgress(file, bytesLoaded, bytesTotal) {
    try {
      var total = 0;
      for (var idx in this.customSettings.total) {
        var obj = this.customSettings.total[idx];
        total += parseFloat(obj.size, 10);
      }
      
      var done = 0;
      for (var idx in this.customSettings.done) {
        var obj = this.customSettings.done[idx];
        done += parseFloat(obj.size, 10);
      }
      done += parseFloat(bytesLoaded, 10);

      var progress = new FileProgress(file, this.customSettings.progressTarget, this.customSettings.statusTarget);
      
    if (this.customSettings.is_file_uploading) {
//      var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
      var percent = Math.ceil((done / total) * 100);
      progress.setProgress(percent);
      var p_uploaded = roundNumber(done / 1024 / 1024, 1) + 'Mb';
      var t_uploaded = roundNumber(total / 1024 / 1024, 1) + 'Mb';
      progress.setStatus('<span style=\'color: #fff\'>' + percent + '%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + p_uploaded + ' / ' + t_uploaded + '<span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )'  + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
    } else {
      var percent = Math.ceil((done / total) * 100);
      progress.setProgress(percent);
      progress.setStatus('<span style=\'color: #fff\'>' + percent + '%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + (this.customSettings.done.length + 1) + ' / ' + (this.customSettings.total.length) + '&nbsp;Photos  <span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )'  + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
    }
      
//      progress.setStatus('<span style=\'color: #fff\'>' + percent + '%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + uploaded + 'Mb / ' + total + 'Mb<span style=\'color: #aaa;margin-left: 10px\'>' + file.name + '&nbsp;Uploading... )'  + '</span></span>');
    } catch (ex) {
      this.debug(ex);
    }
  }

  function myUploadSuccess(file, serverData) {
    if (this.customSettings.debug == 1) {
      alert(serverData);
    }
    try {
      this.customSettings.done[this.customSettings.done.length] = file;
      
      var total = 0;
      for (var idx in this.customSettings.total) {
        var obj = this.customSettings.total[idx];
        total += parseFloat(obj.size, 10);
      }
      
      var done = 0;
      for (var idx in this.customSettings.done) {
        var obj = this.customSettings.done[idx];
        done += parseFloat(obj.size, 10);
      }
      var percent = Math.ceil((done / total) * 100);

      var progress = new FileProgress(file, this.customSettings.progressTarget);
      
      progress.setComplete(percent);
      progress.toggleCancel(false);
      
    } catch (ex) {
      this.debug(ex);
    }
  }
  
  function myQueueComplete(file) {
    
    var total = 0;
    for (var idx in this.customSettings.total) {
      var obj = this.customSettings.total[idx];
      total += parseFloat(obj.size, 10);
    }
    
    var done = 0;
    for (var idx in this.customSettings.done) {
      var obj = this.customSettings.done[idx];
      done += parseFloat(obj.size, 10);
    }
    
    var progress = new FileProgress(file, this.customSettings.progressTarget, this.customSettings.statusTarget);
    
    if (this.customSettings.is_file_uploading) {
      var p_uploaded = roundNumber(done / 1024 / 1024, 1) + 'Mb';
      var t_uploaded = roundNumber(total / 1024 / 1024, 1) + 'Mb';
      progress.setStatus('<span style=\'color: #fff\'>100%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + p_uploaded + ' / ' + t_uploaded + ' )' + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
    } else {
      progress.setStatus('<span style=\'color: #fff\'>100%</span>' + '<span style=\'color: #aaa; margin-left: 5px\'>( ' + (this.customSettings.done.length) + ' / ' + (this.customSettings.total.length) + '&nbsp;Photos )' + '</span></span><span style=\'margin-left: 10px\';>You have uploaded:</span>');
    }
    
    this.customSettings.done = [];
    this.customSettings.total = [];
    
//    location.reload();
  }
  
  function roundNumber(num, dec) {
    var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
    return result;
  }
</script>
</head>

<body>

<div align="center" width="1000px" height="250px">

<div style="background: #313131; width: 940px; height: 180px; float: left;">
  <div style="margin-top: 25px;">
    <table cellpadding=0 cellspacing=0 width="888px" height="30px" >
      <tr>
        <td align="left"><span id="spanButtonPlaceHolder"></span></td>
        <td align="right">
          <input type="button"  value="" id="btnCancel" class="cancel_disabled" onclick="swfu.cancelQueue();" disabled="disabled"  />
        </td>
      </tr>
    </table>
  </div>
<div class="fieldset flash" id="fsUploadProgress"></div>
<div id="divStatus"></div>
</div>

</div>
</body>
</html>
